<template>
    <div class="header">
      <img src="../assets/logo2.png" alt="" style="margin: 30px" />
      <div class="content">
        <img src="../assets/learn.png" alt="" />
      </div>
  
      <div class="wraper">
        <p class="title">用户注册</p>
  
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="身份证" prop="userIdentity">
            <el-input
              type="text"
              v-model="ruleForm.userIdentity"
              autocomplete="off"
              placeholder="请输入身份证"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="手机号" prop="userPhone">
            <el-input
              type="text"
              v-model="ruleForm.userPhone"
              autocomplete="off"
              placeholder="请输入手机号"
              prefix-icon="el-icon-phone"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="邮箱" prop="userEmail">
            <el-input
              type="text"
              v-model="ruleForm.userEmail"
              autocomplete="off"
              placeholder="请输入邮箱"
              prefix-icon="el-icon-message"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="密码" prop="userPassword">
            <el-input
              type="password"
              v-model="ruleForm.userPassword"
              autocomplete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-unlock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login()" style="float: right"
              >返 回 登 录</el-button
            >
            <el-button @click="register()" style="float: left">注 册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      var checkUserIdentity = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("身份证不能为空"));
        }
        setTimeout(() => {
          if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
            callback(new Error("身份证有误"));
          } else {
            callback();
          }
        }, 1000);
      };
  
      var checkUserPhone = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("手机号不能为空"));
        }
        setTimeout(() => {
          if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
            callback(new Error("手机号有误"));
          } else {
            callback();
          }
        }, 1000);
      };
  
      var checkUserEmail = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("邮箱不能为空"));
        }
        setTimeout(() => {
          if (!/(^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$)/.test(value)) {
            callback(new Error("邮箱有误"));
          } else {
            callback();
          }
        }, 1000);
      };
  
      var checkUserPassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
  
      return {
        ruleForm: {
          userIdentity: "",
          userPassword: "",
          userEmail: "",
          userPhone: "",
        },
        rules: {
          userPassword: [
            { validator: checkUserPassword, trigger: "blur", required: true },
          ],
          userIdentity: [
            { validator: checkUserIdentity, trigger: "blur", required: true },
          ],
          userPhone: [
            { validator: checkUserPhone, trigger: "blur", required: true },
          ],
          userEmail: [
            { validator: checkUserEmail, trigger: "blur", required: true },
          ],
        },
      };
    },
    methods: {
      login() {
        this.$router.push("/login");
      },
      register() {
        this.$router.push("/register");
      },
    },
  };
  </script>
  
  <style>
  .header {
    background: url("../assets/learn-bg.png");
  }
  .wraper {
    width: 30%;
    height: 400px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    position: absolute;
    left: 90%;
    top: 50%;
    transform: translate(-90%, -50%);
    background: rgba(255, 255, 255, 1);
  }
  
  .title {
    color: #343434;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
  }
  </style>
  